<template>
  <div>
    <dialogDiy ref="dialogDiyRef" DialogWidth="900px" :modalDes="false">
      <div class="login">
        <div class="login-main">
          <div class="main-right">
            <div class="logo">
              <img src="../../assets/images/logo.png" alt="" />
            </div>
            <div class="login-form">
              <el-form
                autoComplete="on"
                :model="loginForm"
                :rules="loginRules"
                ref="loginForm"
                label-position="left"
              >
                <h2 class="login-title">欢迎登录</h2>
                <el-form-item prop="username">
                  <el-input
                    name="username"
                    type="text"
                    v-model="loginForm.username"
                    autoComplete="on"
                    placeholder="请输入用户名"
                  >
                    <div
                      slot="prefix"
                      style="margin-top: 5px; margin-left: 2px"
                    >
                      <i
                        style="font-size: 18px;"
                        class="el-icon-user-solid"
                      ></i>
                    </div>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    name="password"
                    :type="pwdType"
                    @keyup.enter.native="handleLogin"
                    v-model="loginForm.password"
                    autoComplete="on"
                    placeholder="请输入密码"
                  >
                    <div
                      slot="prefix"
                      style="margin-top: 5px; margin-left: 2px"
                    >
                      <i style="font-size: 18px;" class="el-icon-lock"></i>
                    </div>
                    <div slot="suffix" @click="showPwd" style="margin-top: 5px">
                      <img
                        style="width: 18px; height: 12px; line-height: 16px"
                        src="../../assets/icon/eye.png"
                      />
                    </div>
                  </el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 60px; text-align: center">
                  <el-button
                    style="width: 100%"
                    type="primary"
                    :loading="loading"
                    v-debounce="1500"
                    @click.native.prevent="handleLogin"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </dialogDiy>
  </div>
</template>

<script>
import { isvalidUsername } from "@/utils/validate";
import { setSupport, getSupport, setCookie, getCookie } from "@/utils/support";
import login_center_bg from "@/assets/images/login_center_bg.png";
import { getPhoneCode } from "../../api/login";
import dialogDiy from "../../components/dialogDiy/index.vue";

export default {
  name: "login",
  components: {
    dialogDiy
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error("请输入正确的用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error("密码不能小于3位"));
      } else {
        callback();
      }
    };
    const validatorPhone = (rule, value, callback) => {
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: "",
        code: "",
        phoneNumber: "",
        loginType: "normal"
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePass }
        ],
        phoneNumber: [
          { required: true, trigger: "blur", validator: validatorPhone }
        ],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }]
      },
      loading: false,
      pwdType: "password",
      login_center_bg,
      dialogVisible: false,
      supportDialogVisible: false,
      btnDisabled: false, //发送验证码按钮是否可用
      countDown: 60, //按钮倒计时
      returnPhoneCode: ""
    };
  },
  created() {
    this.loginForm.username = getCookie("username");
    this.loginForm.password = getCookie("password");
    if (
      this.loginForm.username === undefined ||
      this.loginForm.username == null ||
      this.loginForm.username === ""
    ) {
      this.loginForm.username = "admin";
    }
    if (
      this.loginForm.password === undefined ||
      this.loginForm.password == null
    ) {
      this.loginForm.password = "";
    }
  },
  methods: {
    openLog() {
      this.$refs.dialogDiyRef.openlog();
    },
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    // 发送验证码
    sendCode() {
      if (this.loginForm.phoneNumber) {
        getPhoneCode(this.loginForm.phoneNumber).then(res => {
          if (res.code == 200) {
            this.btnDisabled = true;
            let timer = setInterval(() => {
              if (this.countDown > 0) {
                this.countDown--;
              } else {
                clearInterval(timer);
                this.btnDisabled = false;
                this.countDown = 60;
              }
            }, 1000);
          }
        });
      }
    },
    phoneInputFun(val) {
      let reg = /^[0-9]+$/;
      if (!reg.test(val)) {
        this.loginForm.phoneNumber = "";
      }
    },
    handleLogin() {
      // console.log(this.loginForm,'1234667')
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // let isSupport = getSupport();
          // if(isSupport===undefined||isSupport==null){
          //   this.dialogVisible =true;
          //   return;
          // }
          this.loading = true;
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.loading = false;
              setCookie("username", this.loginForm.username, 15);
              setCookie("password", this.loginForm.password, 15);
              this.$router.push({ path: "/" });
            })
            .catch(() => {
              this.loading = false;
            });
          //  判断接口返回的验证码与输入框是否一致
          // if (this.loginForm.code == this.returnPhoneCode) {
          //
          // } else {
          //   this.$message.error("验证码输入有误")
          // }
        } else {
          console.log("参数验证不合法！");
          return false;
        }
      });
    },
    handleTry() {
      this.dialogVisible = true;
    },
    dialogConfirm() {
      this.dialogVisible = false;
      setSupport(true);
    },
    dialogCancel() {
      this.dialogVisible = false;
      setSupport(false);
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  .login-main {
    //position: absolute;
    //left: 50%;
    //top: 50%;
    //transform: translate(-50%, -50%);
    //display: flex;
    background-color: #fff;

    .main-left {
      width: 50%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .main-right {
      //width: 50%;

      .logo {
        margin-top: 48px;
        margin-left: 30px;
        width: 156px;
        height: 72px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .login-form {
        // margin-top: 50px;
        padding: 50px 100px;
      }
    }
  }
}

.login-title {
  margin-bottom: 50px;
  text-align: center;
  color: #f2891d;
}

.login-center-layout {
  background: #409eff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-top: 200px;
}

/deep/ .el-input__inner {
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
}

/deep/ .el-form-item {
  margin-bottom: 40px;
}

/deep/ .el-input__inner:focus {
  // el-input输入时设置边框颜色
  border: #e5e5e5 1px solid !important;
}

/deep/ .el-button--primary {
  height: 50px;
  background-color: #f2891d;
  border: none;
}
</style>
